<template>
    <el-card class="box-card">
      <div slot="header" class="clearfix" v-if='device == "desktop"'>
        <div class="left">
          <PartitionTitle title="设备监控" type='line'></PartitionTitle>
        </div>

        <el-cascader
          v-model="erpCommonList"
          :options="treeList"
          :props='defaultProps'
          ref="cascader"
          size="small"
          style="width:300px;margin-right: 30px;"
          readonly
          @change="selectQuery"
        >
        </el-cascader>
        <i class="el-icon-setting" @click="openIndexDialog"></i>
      </div>

      <div slot="header" class="clearfix clear-pad" v-if='device == "pad"'>
        <el-cascader
          v-model="erpCommonList"
          :options="treeList"
          :props='defaultProps'
          ref="cascader"
          size="small"
          style="width:300px"
          readonly
          @change="selectQuery"
        >
        </el-cascader>

        <div class="left">
          <i class="el-icon-setting" @click="openIndexDialog"></i>
        </div>
      </div>

      <template v-if='isShowEquip'>
        <equipWarn :queryData="queryWarnCode" :queryType="queryType" ref='warn'/>
        <equipMonitor :queryData="queryMonitorId" :queryType="queryType" :lineIds="lineIds" ref='monitor'/>
      </template>

      <!-- 关注指标 -->
      <careIndexList
        :visible.sync="careIndexDialog.visible"
        :defaultValues="careIndexDialog.defaultValues"
        :defaultSearch="defaultSearch"
        :multiple="true"
        @closeDialog="closeIndexDialog"
      ></careIndexList>
    </el-card>
</template>
<script>
  import equipWarn from "./equipWarn";
  import equipMonitor from "./equipMonitor";
  import careIndexList from "@/views/components/careIndexList";
  import {getFollowIndex,addOrUpdateIndex} from "@/api/workbench/index";
  import { mapState,mapGetters} from "vuex";
export default {
  props:{
    userInfo:{
      type:Object,
      default:()=>{}
    }
  },
  data() {
    return {
      loading: false,
      defaultProps: {
        value: "code",
        label: "label",
        checkStrictly: true,
        emitPath: true,
      },
      isShowEquip:false,
      lineIds:"",
      queryWarnCode:"",
      queryMonitorId:"",
      queryType:"",
      treeList:[],
      erpCommonList:[],
      careIndexDialog: {
        visible: false,
        defaultValues: []
      },
      indexIds:[],
      defaultSearch:{
        factoryDeptCode: null,
        workshopCode:null,
        workshopId: null,
        lineId: null
      }
    };
  },

  computed: {
    ...mapGetters([
      'treePermitList',
      'allList'
    ]),
    ...mapState({
      device: (state) => state.app.device
    })
  },

  // created() {
  //   this.getList()
  // },

  methods:{
    getList(){
      if(this.treePermitList?.length){
        this.treeList = this.getTreeData(structuredClone(this.treePermitList));
        const {produceManagerHead,plantManager,workshopHead,lineHead,groupHead,stationBind} = this.userInfo;
        if(produceManagerHead || plantManager || (!workshopHead && !groupHead && !lineHead && !stationBind)){//生产经理,厂长，没有任何岗位
          this.queryType = "line";
          const factoryList = this.treePermitList || []
          const workShopList = this.allList[0]?.workshopVos?.length ? this.allList[0]?.workshopVos : [];
          const lineIds = [];
          const lindCodes = [];
          this.erpCommonList = [factoryList[0]?.code || null];
          this.defaultSearch.factoryDeptCode = factoryList[0]?.code || null;
          if(workShopList?.length){
            workShopList.forEach(item => {
              if(item.productionLineVos?.length){
                item.productionLineVos.forEach(ele => {
                  lineIds.push(ele?.lineId);
                  lindCodes.push(ele?.lineCode)
                })
              }
            })
            if(lineIds?.length){
              this.queryMonitorId = lineIds.join();
              this.lineIds = lineIds.join();
            }else{
              this.queryMonitorId = ""
              this.lineIds = "";
            }
            if(lindCodes?.length){
              this.queryWarnCode = lindCodes.join();
            }else{
              this.queryWarnCode = ""
            }
          }else{
            this.queryMonitorId = "";
            this.lineIds = "";
            this.queryWarnCode = ""
          }
        }
        else if(workshopHead){//车间负责人
          this.queryType = "line";
          const workShopList = this.treePermitList[0]?.children || [];
          const workshopCode = workShopList[0]?.code || null;   //当前显示的车间的编码
          const workshopItem = this.allList[0]?.workshopVos?.length ? this.allList[0]?.workshopVos.find(ele => ele.workshopCode === workshopCode) : {}
          const lineList = workshopItem?.productionLineVos || [];
          if(lineList?.length){
            this.queryMonitorId = lineList.map(ele => ele?.lineId).join();
            this.lineIds = lineList.map(ele => ele?.lineId).join();
            this.queryWarnCode = lineList.map(ele => ele?.lineCode).join();
          }
          else{
            this.queryMonitorId = "";
            this.lineIds = "";
            this.queryWarnCode = "";
          }
          this.erpCommonList = [
            this.treePermitList[0]?.code || null,
            workShopList[0]?.code || null
          ]
          this.defaultSearch.factoryDeptCode = this.treePermitList[0]?.code || null;
          this.defaultSearch.workshopId = workShopList[0]?.id || null;
          this.defaultSearch.workshopCode = workShopList[0]?.code || null;
        }
        else if (lineHead || groupHead || stationBind){//班组负责人/产线负责人/工位人员
          this.queryType = "line";
          this.queryMonitorId = this.treePermitList[0]?.children[0]?.children[0]?.id || null;
          this.lineIds = this.treePermitList[0]?.children[0]?.children[0]?.id || null;
          this.queryWarnCode = this.treePermitList[0]?.children[0]?.children[0]?.code || null;
          this.erpCommonList = [
            this.treePermitList[0].code || null,
            this.treePermitList[0]?.children[0]?.code || null,
            this.treePermitList[0]?.children[0]?.children[0].code || null
          ]
          this.defaultSearch.factoryDeptCode = this.treePermitList[0].code || null;
          this.defaultSearch.workshopId = this.treePermitList[0]?.children[0]?.id || null;
          this.defaultSearch.workshopCode = this.treePermitList[0]?.children[0]?.code || null;
          this.defaultSearch.lineId = this.treePermitList[0]?.children[0]?.children[0].id || null;
        }
      }
      this.isShowEquip = true;
    },

    selectQuery(list){
      const item = this.$refs["cascader"].getCheckedNodes();
      if(item?.length){
        if(item[0].level == 4){//选工位
          this.queryType = "station";
          this.queryMonitorId = item[0]?.data?.id || null;
          this.lineIds = item[0]?.parent?.data?.id || null;
          this.queryWarnCode = item[0]?.data?.id || null;
          this.defaultSearch.factoryDeptCode = item[0]?.pathNodes[0]?.data?.code || null;
          this.defaultSearch.workshopId = item[0]?.pathNodes[1]?.data?.id || null;
          this.defaultSearch.workshopCode = item[0]?.pathNodes[1]?.data?.code || null;
          this.defaultSearch.lineId = item[0]?.pathNodes[2]?.data?.id || null;
        }
        else if(item[0].level == 3){//选产线
          this.queryType = "line";
          this.queryMonitorId = item[0]?.data?.id || null;
          this.lineIds = item[0]?.data?.id || null;
          this.queryWarnCode = item[0]?.data?.code || null;
          this.defaultSearch.factoryDeptCode = item[0]?.pathNodes[0]?.data?.code || null;
          this.defaultSearch.workshopId = item[0]?.pathNodes[1]?.data?.id || null;
          this.defaultSearch.workshopCode = item[0]?.pathNodes[1]?.data?.code || null;
          this.defaultSearch.lineId = item[0]?.pathNodes[2]?.data?.id || null;
        }
        else if(item[0].level == 2){//选车间
          this.queryType = "line";
          const workshopCode = item[0]?.data?.code || null;
          const workshopItem = this.allList[0]?.workshopVos?.length ? this.allList[0]?.workshopVos.find(ele => ele.workshopCode === workshopCode) : {}
          const lineList = workshopItem?.productionLineVos || [];
          if(lineList?.length){
            this.queryMonitorId = lineList.map(ele => ele?.lineId).join();
            this.lineIds = lineList.map(ele => ele?.lineId).join();
            this.queryWarnCode = lineList.map(ele => ele?.lineCode).join();
          }else{
            this.queryMonitorId = "";
            this.lineIds = "";
            this.queryWarnCode = ""
          }
          this.defaultSearch.factoryDeptCode = item[0]?.pathNodes[0]?.data?.code || null;
          this.defaultSearch.workshopId = item[0]?.pathNodes[1]?.data?.id || null;
          this.defaultSearch.workshopCode = item[0]?.pathNodes[1]?.data?.code || null;
          this.defaultSearch.lineId = null;
        }
        else if(item[0].level == 1){//选工厂
          this.queryType = "line";
          const workShopList = this.allList[0]?.workshopVos?.length ? this.allList[0]?.workshopVos : [];
          const lineIds = [];
          const lindCodes = []
          this.defaultSearch.factoryDeptCode = item[0]?.data?.code || null;
          this.defaultSearch.workshopId = null;
          this.defaultSearch.workshopCode = null;
          this.defaultSearch.lineId = null;
          if(workShopList?.length){
            workShopList.forEach(item => {
              if(item.productionLineVos?.length){
                item.productionLineVos.forEach(ele => {
                  lineIds.push(ele?.lineId);
                  lindCodes.push(ele?.lineCode)
                })
              }
            })
          }
          if(lineIds?.length){
            this.queryMonitorId = lineIds.join();
            this.lineIds = lineIds.join();
          }
          else{
            this.queryMonitorId = ""
            this.lineIds = ""
          }
          if(lindCodes?.length){
            this.queryWarnCode = lindCodes.join();
          }else{
            this.queryWarnCode = ""
          }
        }
      }else{
        this.queryMonitorId = "";
        this.lineIds = "";
        this.queryWarnCode = ""
      }
      //重置已经选择的设备
      this.$refs["monitor"].form.equipId = "";
    },

    //获取关注指标列表
    getCareIndex() {
      this.tableLoading = true;
      getFollowIndex()
      .then((res) => {
        if(res.code == 200 && res.data?.length){
          this.careIndexDialog.defaultValues = res.data.map(ele => {
            return{
              id:ele.indexId,
              indexConfigName:ele.indexName
            }
          })
        }else{
          this.careIndexDialog.defaultValues = []
        }
        this.careIndexDialog.visible = true;
      })
      .finally(() => {
        this.tableLoading = false;
      });
    },

    openIndexDialog(){
      this.getCareIndex()
    },

    closeIndexDialog(list){
      if(list?.length){
        this.indexIds = list.map(item => item?.id);
      }else{
        this.indexIds = [];
      }
      this.updateIndex()
    },

    //更新关注指标列表
    updateIndex() {
      this.tableLoading = true;
      addOrUpdateIndex({indexIds:this.indexIds})
      .then((res) => {
        if(res.code == 200){
          //重置已经选择的设备,并且重置已经选择的指标
          this.$refs["monitor"].form.equipId = "";
          this.$refs["monitor"].activeName = "";
          this.$refs["monitor"].geEquipmentList();
          this.$refs["warn"].getWarmEquipmentList();
          this.$refs["warn"].getAbnormalEquipmentList();
          this.msgSuccess("关注指标成功" || res.msg)
        }
      })
      .finally(() => {
        this.tableLoading = false;
      });
    },
  },

  watch:{
    userInfo:{
      handler(list){
        if(list?.produceManagerHead != null && list?.produceManagerHead != undefined){
          this.getList()
        }
      },
      deep: true,
      immediate: true
    }
  },

  components:{
    equipWarn,
    equipMonitor,
    careIndexList
  }
};
</script>
<style lang="scss" scoped>
.box-card{
  width: 100%;
  .clearfix{
    display:flex;
    align-items: center;
    color: #F59A23;
    .left{
      display:flex;
      align-items: center;
      .block-title{
        margin-bottom: 0;
      }
    }
    i{
      cursor: pointer;
      color: #1F2E4D;
    }
    ::v-deep.el-tabs{
      display: flex;
      align-items: center;
      margin-left:30px;
      .item {
        margin-right:30px;
        .el-link--inner{
          display: flex;
          align-items: flex-end;
          img{
            width: 18px;
            height: 18px;
          }
          .name{
            padding:0 6px
          }
        }
      }
      .el-tabs__content{
        margin: 0 0 0.9375rem;
      }
    }
    .date{
      text-align: right;
      flex: 1;
      span{
        color: #34855B;
        font-size: 14px;
        margin-right: 20px;
      }
    }
  }
  .clear-pad{
    justify-content: space-between;
    .left{
      flex: 1;
      justify-content: flex-end;
    }
  }
  .title-common{
    .title{
      display:flex;
      align-items: center;
      font-size: 14px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #1F2E4D;
      margin-bottom:14px;
      .title-name{
        margin: 0;
      }
    }
  }
  .monitor{
    .title{
      margin-top:14px;
      .title-name{
        margin-right:16px;
      }
      i{
        cursor: pointer;
      }
    }
  }
}

</style>
